<template>
	<div class="login">
		<template v-if="showInput">
			<van-image :src="require('./image/logo.png')" />
			<h3>村民经营性自建房消防安全排查治理</h3>
			<div class="input-box">
				<input
					type="text"
					v-model="formData.userName"
					placeholder="请输入账号"
				/>
				<img
					v-if="code?.length"
					@click="code = ''"
					class="icon-delete"
					src="https://img.hzanchu.com/acimg/6cfcbbc91a02575685a796328d66a2a3.png"
					alt=""
				/>
			</div>
			<div class="input-box">
				<input
					type="password"
					v-model="formData.pwd"
					placeholder="请输入密码"
				/>
				<img
					v-if="code?.length"
					@click="code = ''"
					class="icon-delete"
					src="https://img.hzanchu.com/acimg/6cfcbbc91a02575685a796328d66a2a3.png"
					alt=""
				/>
			</div>
			<div class="btn">
				<van-button
					block
					type="primary"
					@click="login"
				>
					登录
				</van-button>
			</div>
		</template>
	</div>
</template>

<script setup>
import { ref, nextTick, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userLogin } from '@/service/village'
import { useUserStore, useLoginStore } from '@/store'
import { Toast } from 'vant'

const userStore = useUserStore()
const loginStore = useLoginStore()

const route = useRoute()
const router = useRouter()
const formData = reactive({
	userName: '',
	pwd: ''
})
const showInput = ref(false)

const login = async () => {
	try {
		const result = await userLogin({
			id: route.query.id,
			...formData
		})
		if (result.succ) {
			userStore.setUserInfo(result?.data)
			localStorage.setItem(process.env.VUE_APP_TOKEN_NAME, result?.data?.jwtToken)
			await loginStore.setLoginInfo()
			nextTick(() => {
				router.push({
					name: 'login-info',
					query: {
						id: route.query.id
					}
				})
			})
		}
	} catch (e) {
	}
}

const ssoLogin = async () => {
	try {
		const result = await userLogin({
			id: route.query.id,
			...formData
		})
		if (result.succ) {
			userStore.setUserInfo(result?.data)
			localStorage.setItem(process.env.VUE_APP_TOKEN_NAME, result?.data?.jwtToken)
			await loginStore.setLoginInfo()
			nextTick(() => {
				router.replace({
					name: 'menu',
				})
			})
		} else {
			throw new Error(result)
		}
	} catch (e) {
		showInput.value = true
	}
}

onMounted(() => {
	ssoLogin()
})
</script>

<style scoped lang="less">
.login {
	height: 100%;
	background: url(image/page_bg.png) no-repeat top center / 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.van-image {
		width: 146px;
		margin-bottom: 24px;
		margin-top: 200px;
	}
	h3 {
		color: #fff;
		margin-bottom: 86px;
	}
	.input-box {
		position: relative;
		width: 630px;
		height: 92px;
		margin-bottom: 48px;
		input {
			width: 100%;
			height: 100%;
			border-radius: 16px;
			font-size: 32px;
			text-indent: 28px;
			&::placeholder {
				color: #AAABAD;
			}
		}
		.icon-delete {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 24px;
			width: 32px;
			height: 32px;
			opacity: .7;
		}
	}
	.btn {
		width: 630px;
	}
}
</style>
